.conter {
  flex: 1;
}

.litser {
  height: 510px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    width: 0 !important
  }

  .lister {
    padding: 10px;
    cursor: pointer;
    margin: 5px 0;
    background: rgba($color: #000000, $alpha: 0.1);
    border-radius: 2px;
    transition: all 0.1s;

    &:hover {
      background: rgba($color: #025ef0, $alpha: 0.5);
      color: #fff;
    }
  }

  .activet {
    background: rgba($color: #025ef0, $alpha: 0.5);
    color: #fff;
  }
}

.upfiler {
  width: 100%;
  height: 100%;

  .uptikes {
    width: 100%;
    height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #409eff;
    border-radius: 10px;


    .inputer {
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .upList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;

    &::-webkit-scrollbar {
      width: 0 !important;
    }

    .iconsge {
      width: 100px;
      height: 120px;
    }

    .uplistcontent {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      padding: 10px;
      // margin-bottom: 20px;
      border: 1px dashed #409eff;
      margin: 10px;
      border-radius: 20px;
      position: relative;
      height: 200px;
      transition: all 0.2s;
      position: relative;
      // overflow: hidden;
      opacity: 1;

      .rightclears {
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 30px;
        color: #999;
      }

      .upconter {
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        opacity: 0.2;
        transition: all 0.1s;
      }
    }

    .hidengbox {
      height: 0;
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
      margin-bottom: 0;
      line-height: 0;
    }
  }
}

.rightlisster {
  padding: 20px;
}

.hters {
  padding-left: 10px;
}

.userinfobox {
  width: 300px;
  padding: 10px;
  background-color: #f5f7f9;
  border-radius: 5px;
  display: flex;
  align-items: center;
  margin-top: 10px;

  .inmge {
    padding-right: 10px;

    .userinage {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }

  .usernagid {
    .idhss {
      margin-left: 5px;
      color: #8c8c8c;
      font-size: 12px;
    }
  }
}

.noleters {
  background: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 5px;
  height: 80px;
  opacity: 1;
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
  cursor: pointer;

  &:hover {
    border-color: #409eff;
    color: #409eff;
  }
}

.bouurt {
  padding: 20px;

  .inyusr {
    display: flex;
    align-items: center;

    .leftringm {
      padding-right: 10px;

      .cnnghds {
        width: 60px;
        height: 60px;
        border-radius: 2px;
      }
    }

    .rightsb {
      width: 100px;

      .titlre {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .cinrifd {
        padding: 5px 0;
        color: #8c8c8c;
        font-size: 12px;
      }
    }
  }
}

.getusher {
  width: 70%;
  // height: 80px;
  background: #f5f7f9;
  border-radius: 5px;
  padding: 10px;

  display: flex;
  align-items: center;

  .leftringm {
    padding-right: 10px;

    .cnnghds {
      width: 60px;
      height: 60px;
      border-radius: 2px;
    }
  }

  .rightsb {
    // width: 100px;
    flex: 0.8;
    line-height: 20px;

    .titlre {
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .cinrifd {
      color: #8c8c8c;
      font-size: 12px;
    }
  }
}

.el-col {
  text-align: center;
}

.slectClass {
  color: #fff;
  background: #025ef0 !important;
}

.interbox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .ontinters {
    color: red;
  }

  .interss {
    width: 50%;

  }

  .tersj {
    margin: 10px;
    text-align: center;
    color: #8c8c8c;
  }
}